<template>
    <view>
        <view class="operate">
            <view class="operate-item">
                <button class="btn-primary btn-large btn-square plain" @click="start">开始抽奖</button>
            </view>
            <view class="operate-item">
                <button class="btn-primary btn-large btn-square plain" @click="end">结束抽奖</button>
            </view>
            <view class="operate-item">
                <button class="btn-primary btn-large btn-square plain" @click="ready">重置抽奖</button>
            </view>
        </view>
        <view class="form-item__box form-item__right">
            <view class="form-item">
                <view class="form-item__label">奖项切换</view>
                <view class="form-item__content flex-j-end">
                    <button @click="prevPrize" :class="[`btn-square btn-mini plain btn-primary`]" :disabled="params.index === 1">
                        <text class="hx-icon-fanhui"></text>
                    </button>
                    <button @click="nextPrize" :class="[`btn-square btn-mini plain btn-primary`]">
                        <text class="hx-icon-gengduo"></text>
                    </button>
                </view>
            </view>
            <view class="form-item">
                <view class="form-item__label">一次抽取</view>
                <view class="form-item__content">
                    <picker @change="changePicker" :range="users" mode="selector" class="form-item__input form-item__picker">
                        <view v-if="!params.num" class="placeholder">请选择人数</view>
                        <template v-else>{{ params.num }}人</template>
                    </picker>
                    <text class="hx-icon-gengduo arrow-icon"></text>
                </view>
            </view>
            <view class="form-item">
                <view class="form-item__label">获奖名单获取</view>
                <view class="form-item__content flex-j-end">
                    <button @click="prevWinningNumPage" :class="[`btn-square btn-mini plain ${params.winningNumPage === 1 ? 'btn-cancel' : 'btn-primary'}`]" :disabled="params.winningNumPage === 1">
                        <text class="hx-icon-fanhui"></text>
                    </button>
                    <button @click="nextWinningNumPage" :class="[`btn-square btn-mini plain ${params.winningNumPage === 4 ? 'btn-cancel' : 'btn-primary'}`]">
                        <text class="hx-icon-gengduo"></text>
                    </button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            users: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 100, 120],
            params: {
                num: 1,
                index: 1 //奖品项目
            }
        }
    },
    props: ["activeId"],
    methods: {
        start() {
            this.changeLottery({ cmd: "start" })
        },
        end() {
            this.changeLottery({ cmd: "end" })
        },
        ready() {
            this.params = { num: 1, index: 1 }
            this.changeLottery()
        },
        setLotteryPage(index) {
            this.params.index = index
        },
        prevPrize() {
            if (this.params.index === 0) return this.$showToast("没有更多了")
            this.changeLottery({ index: this.params.index - 1 })
        },
        nextPrize() {
            this.changeLottery({ index: this.params.index + 1 })
        },
        prevWinningNumPage() {
            this.changeLottery({ winningNumPage: this.params.winningNumPage - 1 })
        },
        nextWinningNumPage() {
            this.changeLottery({ winningNumPage: this.params.winningNumPage + 1 })
        },
        changePicker(e) {
            let num = this.users[e.detail.value]
            if (num) {
                this.params.num = num
                this.changeLottery({ num })
            }
        },
        changeLottery(data = {}) {
            this.$emit("changeLottery", { id: this.activeId, cmd: "ready", ...this.params, ...data })
        }
    }
}
</script>
<style lang="scss" scoped>
.operate {
    margin: 30rpx 30rpx 80rpx 30rpx;
    &-item {
        display: flex;
        justify-content: center;
        .btn-primary {
            background: transparent;
            border-color: #fff;
            color: #fff;
            border-radius: 20rpx;
        }
        &:not(:last-child) {
            margin-bottom: 40rpx;
        }
    }
}
</style>
